<template>
    <div class="buttons">
        <div>
            <transition name="thumbs1">
                <i class="far fa-thumbs-up" @click="thumbs2Show" v-show="showStatus == 1"/>
            </transition>
            <transition name="thumbs2">
                <i class="fas fa-thumbs-up" @click="thumbs1Show" v-show="showStatus == 2"/>
            </transition>
        </div>
        <div>
            <i class="far fa-comment" @click="sendShow()"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CardButtonsComponent",
        data(){
            return{
                isThumbsUp:false,
                show:false,
                showStatus:1
            }
        },

        methods:{
            sendShow(){
                this.show = !this.show
                this.$emit('show',this.show)
            },
            thumbs2Show(){
                this.showStatus = 3
                setTimeout(()=>{this.showStatus = 2},350)

            },
            thumbs1Show(){
                this.showStatus = 3
                setTimeout(()=>{this.showStatus = 1},350)

            }
        }
    }
</script>

<style scoped>
    .buttons{
        margin-left: 90px;
        margin-top: 10px;
        height: 30px;
        text-align: center;
        width:659px;

    }
    .buttons>div{
        float: right;
        width: 30px;
        height: 30px;
    }
    .buttons div:not(:nth-of-type(1)){
        margin-right: 50px;
    }

    i{
        font-size:25px;

    }


    i:hover{
        cursor: pointer;
        font-size: 28px;

    }
    .thumbs1-leave-active,.thumbs2-leave-active {
        transition: transform 300ms;
    }

    .thumbs1-enter-active,.thumbs2-enter-active{
        transition: transform 200ms;
    }

    .thumbs1-leave-to,.thumbs2-leave-to{
        transform: scale(0.2);
    }
    .thumbs1-enter,.thumbs2-enter{
        transform: scale(0.2);
    }
</style>